﻿@section styles{
    <style>
        .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            display:none;
        }
        .param-list {
            display: flex;
            justify-content: space-between;
        }
    </style>
}

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            基础资料
            <small>地区站点分布</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">基础资料</a></li>
            <li class="active">地区站点分布</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <input type="hidden" ref="ClientId" id="ClientId" value="@ViewBag.ClientId" />
                        <input type="hidden" ref="DeviceId" id="DeviceId" value="@ViewBag.DeviceId" />
                        <div class="pull-right" style="margin-bottom:10px">
                            <a href="/DeviceData/MachineDetails?ClientId=@ViewBag.ClientId" class="btn btn-primary"><i class="fa fa-reply"></i> 返回站点</a>
                        </div>
                        <table id="bootstraptableHistory" class="table table-bordered text-nowrap table-hover"></table>

                        <div class="box-content">
                            <div class="row">
                                <div class="col-md-6" style="margin-top: 20px;">
                                    <div id="param1" class="deviceparam-chart">
                                    </div>
                                </div>
                                <div class="col-md-6" style="margin-top: 20px;">
                                    <div id="param2" class="deviceparam-chart">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6" style="margin-top: 20px;">
                                    <div id="param3" class="deviceparam-chart">
                                    </div>
                                </div>
                                <div class="col-md-6" style="margin-top: 20px;">
                                    <div id="param4" class="deviceparam-chart">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    <script type="text/javascript">
        //$(document).ready(function () {
        //    //漏电通道1
        //    var param1Trend = echarts.init(document.getElementById('param1'));
        //    var optionParam1 = {
        //        title: {
        //            text: '温度曲线'
        //        },
        //        tooltip: {
        //            trigger: 'axis'
        //        },
        //        legend: {
        //            data: ['温度']
        //        },
        //        grid: {
        //            left: '3%',
        //            right: '4%',
        //            bottom: '3%',
        //            containLabel: true
        //        },
        //        toolbox: {
        //            feature: {
        //                saveAsImage: {}
        //            }
        //        },
        //        xAxis: {
        //            type: 'category',
        //            boundaryGap: false,
        //            data: ['03-13 14:03',
        //                '03-13 15:03',
        //                '03-13 16:03',
        //                '03-13 17:03',
        //                '03-13 18:03',
        //                '03-13 19:03',
        //                '03-13 20:03',
        //                '03-13 21:03',
        //                '03-13 22:03',
        //                '03-13 23:03']
        //        },
        //        yAxis: {
        //            name: '℃',
        //            type: 'value',
        //            max: 1
        //        },
        //        series: [
        //            {
        //                name: '温度',
        //                type: 'line',
        //                data: [0,
        //                    0.05,
        //                    0.15,
        //                    0.2,
        //                    0,
        //                    0.1,
        //                    0.2,
        //                    0.1,
        //                    0.1,
        //                    0]
        //            }
        //        ]
        //    };
        //    // 使用刚指定的配置项和数据显示图表。
        //    param1Trend.setOption(optionParam1);

        //    //温度
        //    var param2Trend = echarts.init(document.getElementById('param2'));
        //    var optionParam2 = {
        //        title: {
        //            text: '湿度曲线'
        //        },
        //        tooltip: {
        //            trigger: 'axis'
        //        },
        //        legend: {
        //            data: ['湿度']
        //        },
        //        grid: {
        //            left: '3%',
        //            right: '4%',
        //            bottom: '3%',
        //            containLabel: true
        //        },
        //        toolbox: {
        //            feature: {
        //                saveAsImage: {}
        //            }
        //        },
        //        xAxis: {
        //            type: 'category',
        //            boundaryGap: false,
        //            data: ['03-13 14:03',
        //                '03-13 15:03',
        //                '03-13 16:03',
        //                '03-13 17:03',
        //                '03-13 18:03',
        //                '03-13 19:03',
        //                '03-13 20:03',
        //                '03-13 21:03',
        //                '03-13 22:03',
        //                '03-13 23:03']
        //        },
        //        yAxis: {
        //            name: '%',
        //            type: 'value'
        //        },
        //        series: [
        //            {
        //                name: '湿度',
        //                type: 'line',
        //                data: [22,
        //                    22.05,
        //                    22.15,
        //                    22.2,
        //                    22,
        //                    22.1,
        //                    22.2,
        //                    22.1,
        //                    22.1,
        //                    22]
        //            }
        //        ]
        //    };
        //    // 使用刚指定的配置项和数据显示图表。
        //    param2Trend.setOption(optionParam2);

        //    //电流
        //    var param3Trend = echarts.init(document.getElementById('param3'));
        //    var optionParam3 = {
        //        title: {
        //            text: '液位曲线'
        //        },
        //        tooltip: {
        //            trigger: 'axis'
        //        },
        //        legend: {
        //            data: ['液位']
        //        },
        //        grid: {
        //            left: '3%',
        //            right: '4%',
        //            bottom: '3%',
        //            containLabel: true
        //        },
        //        toolbox: {
        //            feature: {
        //                saveAsImage: {}
        //            }
        //        },
        //        xAxis: {
        //            type: 'category',
        //            boundaryGap: false,
        //            data: ['03-13 14:03',
        //                '03-13 15:03',
        //                '03-13 16:03',
        //                '03-13 17:03',
        //                '03-13 18:03',
        //                '03-13 19:03',
        //                '03-13 20:03',
        //                '03-13 21:03',
        //                '03-13 22:03',
        //                '03-13 23:03']
        //        },
        //        yAxis: {
        //            name: 'mm',
        //            type: 'value',
        //            max: 60
        //        },
        //        series: [
        //            {
        //                name: '液位',
        //                type: 'line',
        //                data: [50,
        //                    52,
        //                    53,
        //                    51,
        //                    50,
        //                    51.1,
        //                    50.2,
        //                    54.1,
        //                    53.1,
        //                    51]
        //            }
        //        ]
        //    };
        //    // 使用刚指定的配置项和数据显示图表。
        //    param3Trend.setOption(optionParam3);

        //    //电压
        //    var param4Trend = echarts.init(document.getElementById('param4'));
        //    var optionParam4 = {
        //        title: {
        //            text: '有毒有害曲线'
        //        },
        //        tooltip: {
        //            trigger: 'axis'
        //        },
        //        legend: {
        //            data: ['有毒有害']
        //        },
        //        grid: {
        //            left: '3%',
        //            right: '4%',
        //            bottom: '3%',
        //            containLabel: true
        //        },
        //        toolbox: {
        //            feature: {
        //                saveAsImage: {}
        //            }
        //        },
        //        xAxis: {
        //            type: 'category',
        //            boundaryGap: false,
        //            data: ['03-13 14:03',
        //                '03-13 15:03',
        //                '03-13 16:03',
        //                '03-13 17:03',
        //                '03-13 18:03',
        //                '03-13 19:03',
        //                '03-13 20:03',
        //                '03-13 21:03',
        //                '03-13 22:03',
        //                '03-13 23:03']
        //        },
        //        yAxis: {
        //            name: 'ppm',
        //            type: 'value',
        //            max: 250
        //        },
        //        series: [
        //            {
        //                name: '有毒有害',
        //                type: 'line',
        //                data: [221,
        //                    220.05,
        //                    223.15,
        //                    222.2,
        //                    222,
        //                    221.1,
        //                    223.2,
        //                    222.1,
        //                    221.1,
        //                    224]
        //            }
        //        ]
        //    };
        //    // 使用刚指定的配置项和数据显示图表。
        //    param4Trend.setOption(optionParam4);


        //});
        //
        var app = new Vue({
            el: '#app',
            data: {
                ClientId: '',
                DeviceId: '',
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.DeviceData.parentNode.parentNode.classList.add("active");
                    _self.$refs.DeviceData.classList.add("active");

                    setTimeout(function () {
                        _self.loadL();
                        _self.playVideo();
                        setDataCardView("#bootstraptableCurrent");
                        setDataCardView("#bootstraptableHistory");

                        //$("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "设备名称");
                    }, 500);
                });
            },
            methods: {
                loadL: function () {
                    _self = this;
                    _self.ClientId = _self.$refs.ClientId.value;
                    _self.DeviceId = _self.$refs.DeviceId.value;
                    //设备当前实时数据
                    var objCurrent = [{
                        field: 'ClientId',
                        title: 'ClientId',
                        visible: false
                    }, {
                        field: 'DeviceId',
                        title: 'DeviceId',
                        visible: false
                    }, {
                        field: 'DeviceName',
                        title: '设备名称',
                        valign: 'middle',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var res = "";
                            res = "<a>" + row.ClientArea + " / " + row.ClientName + " / " + row.DeviceName + "</a>"
                            return res;
                        }
                    }, {
                        field: 'LastTime',
                        align: 'center',
                        valign: 'middle',
                        title: '监测时间',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return _self.jsonDateFormat(value);
                        }
                    }, {
                        field: 'ParameterStatus',
                        align: 'center',
                        valign: 'middle',
                        title: '状态',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var status = "";
                            if (row.ParameterStatus1 == 0 && row.ParameterStatus2 == 0 && row.ParameterStatus3 == 0
                                && row.ParameterStatus4 == 0) {
                                status = "label-success";
                            }
                            else if (row.ParameterStatus1 == 2 || row.ParameterStatus2 == 2 || row.ParameterStatus3 == 2
                                || row.ParameterStatus4 == 2) {
                                status = "label-danger";
                            }
                            else {
                                status = "label-warning";
                            }
                            status = "label-success";
                            if (status == "label-success") {
                                status = '<span class="label ' + status + '">正常</span>'
                                return status;
                            }
                            else if (status == "label-danger") {
                                status = '<span class="label ' + status + '">报警</span>'
                                return status;
                            }
                            else {
                                status = '<span class="label ' + status + '">故障</span>'
                                return status;
                            }

                        }
                    }, {
                        field: 'ParameterName',
                        align: 'left',
                        valign: 'middle',
                        title: '监测参数',
                        width: 100,
                        formatter: function (value, row, index) {
                            var result =
                                "<div class='param-list'>" +
                                '蓄电池电压:<span class="label label-success">' + row.BatteryV + 'V;</span>&emsp;' +
                                '风机电压:<span class="label label-success">' + row.WindV + 'V;</span>&emsp;' +
                                '风机电流:<span class="label label-success">' + row.WindI + 'A;</span>&emsp;' +
                                '风机功率:<span class="label label-success">' + row.WindP + 'W;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '风机转速:<span class="label label-success">' + row.WindR + 'r/s;</span>&emsp;' +
                                '光伏电压:<span class="label label-success">' + row.PVV + 'V;</span>&emsp;' +
                                '光伏电流:<span class="label label-success">' + row.PVI + 'A;</span>&emsp;' +
                                '光伏功率:<span class="label label-success">' + row.PVP + 'W;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '风机日发电量:<span class="label label-success">' + row.WindDailyPower + 'KWH;</span>&emsp;' +
                                '风机总发电量:<span class="label label-success">' + row.WindTotalPower + 'KWH;</span>&emsp;' +
                                '光伏日发电量:<span class="label label-success">' + row.PVDailyPower + 'KWH;</span>&emsp;' +
                                '光伏总发电量:<span class="label label-success">' + row.PVTotalPower + 'KWH;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '日总发电量:<span class="label label-success">' + row.DailyTotalPower + 'KWH;</span>&emsp;' +
                                '总发电量:<span class="label label-success">' + row.TotalPower + 'KWH;</span>&emsp;' +
                                '日用电量:<span class="label label-success">' + row.DailyUsePower + 'KWH;</span>&emsp;' +
                                '总用电量:<span class="label label-success">' + row.TotalUsePower + 'KWH;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '设备唯一通信ID高位:<span class="label label-success">' + row.MachineCommunicationH + ';</span>&emsp;' +
                                '设备唯一通信ID低位:<span class="label label-success">' + row.MachineCommunicationL + ';</span>&emsp;' +
                                '摄像头图像:<span class="label label-success">' + row.ImageUrl + ';</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '整体关机:<span class="label label-success">' + row.AllClose + ';</span>&emsp;' +
                                '泵1本地:<span class="label label-success">' + row.Pump1Local + ';</span>&emsp;' +
                                '泵2本地:<span class="label label-success">' + row.Pump2Local + ';</span>&emsp;' +
                                '泵1远程:<span class="label label-success">' + row.Pump1Remote + ';</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '泵2远程:<span class="label label-success">' + row.Pump2Remote + ';</span>&emsp;' +
                                '泵1故障:<span class="label label-success">' + row.Pump1Alarm + ';</span>&emsp;' +
                                '泵2故障:<span class="label label-success">' + row.Pump2Alarm + ';</span>&emsp;' +
                                '泵1运行:<span class="label label-success">' + row.Pump1Run + ';</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '泵2运行:<span class="label label-success">' + row.Pump2Run + ';</span>&emsp;' +
                                '支架电机上升:<span class="label label-success">' + row.MotorUp + ';</span>&emsp;' +
                                '支架电机下降:<span class="label label-success">' + row.MotorDown + ';</span>&emsp;' +
                                '液位:<span class="label label-success">' + row.WaterLevel + 'm;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '甲烷浓度:<span class="label label-success">' + row.CH4 + ';</span>&emsp;' +
                                '温度:<span class="label label-success">' + row.Temperature + '℃;</span>&emsp;' +
                                '湿度:<span class="label label-success">' + row.Humidity + '%RH;</span>&emsp;' +
                                "</div>";
                            return result;
                        }
                    }, {
                        field: 'ParameterValue5',
                        align: 'center',
                        title: '摄像头截图',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<video id = 'myplayer' src = 'ezopen://open.ys7.com/D73382295/1.hd.live'  width = '400' height = '300' autoplay controls playsInline webkit-playsinline></video>";
                        }
                    }];
                    yui.tableHead("bootstraptableCurrent", "/DeviceDataHistory/CurrentDetailsList?ClientId=" + _self.ClientId + "&&DeviceId=" + _self.DeviceId + "", objCurrent, "POST", "ClientId");
                    //设备历史数据
                    var objHistory = [{
                        field: 'no',
                        title: '#',
                        formatter: function (value, row, index) {
                            var options = $('#bootstraptable').bootstrapTable('getOptions');
                            return index + 1;
                        }
                    }, {
                        field: 'ClientId',
                        title: 'ClientId',
                        visible: false
                    }, {
                        field: 'DeviceId',
                        title: 'DeviceId',
                        visible: false
                    }, {
                        field: 'LastTime',
                        align: 'center',
                        title: '监测时间',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return _self.jsonDateFormat(value);
                        }
                    }, {
                        field: 'ParameterStatus',
                        align: 'center',
                        title: '状态',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var status = "";
                            if (row.ParameterStatus1 == 0 && row.ParameterStatus2 == 0 && row.ParameterStatus3 == 0
                                && row.ParameterStatus4 == 0 && row.ParameterStatus5 == 0 && row.ParameterStatus6 == 0
                                && row.ParameterStatus7 == 0) {
                                status = "label-success";
                            }
                            else if (row.ParameterStatus1 == 2 || row.ParameterStatus2 == 2 || row.ParameterStatus3 == 2
                                || row.ParameterStatus4 == 2 || row.ParameterStatus5 == 2 || row.ParameterStatus6 == 2
                                || row.ParameterStatus7 == 2) {
                                status = "label-danger";
                            }
                            else {
                                status = "label-warning";
                            }
                            status = "label-success";
                            if (status == "label-success") {
                                status = '<span class="label ' + status + '">正常</span>'
                                return status;
                            }
                            else if (status == "label-danger") {
                                status = '<span class="label ' + status + '">报警</span>'
                                return status;
                            }
                            else {
                                status = '<span class="label ' + status + '">故障</span>'
                                return status;
                            }
                        }
                    }, {
                        field: 'ParameterName',
                        align: 'left',
                        valign: 'middle',
                        title: '监测参数',
                        formatter: function (value, row, index) {
                            var result =
                                "<div class='param-list'>" +
                                '蓄电池电压:<span class="label label-success">' + row.BatteryV + 'V;</span>&emsp;' +
                                '风机电压:<span class="label label-success">' + row.WindV + 'V;</span>&emsp;' +
                                '风机电流:<span class="label label-success">' + row.WindI + 'A;</span>&emsp;' +
                                '风机功率:<span class="label label-success">' + row.WindP + 'W;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '风机转速:<span class="label label-success">' + row.WindR + 'r/s;</span>&emsp;' +
                                '光伏电压:<span class="label label-success">' + row.PVV + 'V;</span>&emsp;' +
                                '光伏电流:<span class="label label-success">' + row.PVI + 'A;</span>&emsp;' +
                                '光伏功率:<span class="label label-success">' + row.PVP + 'W;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '风机日发电量:<span class="label label-success">' + row.WindDailyPower + 'KWH;</span>&emsp;' +
                                '风机总发电量:<span class="label label-success">' + row.WindTotalPower + 'KWH;</span>&emsp;' +
                                '光伏日发电量:<span class="label label-success">' + row.PVDailyPower + 'KWH;</span>&emsp;' +
                                '光伏总发电量:<span class="label label-success">' + row.PVTotalPower + 'KWH;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '日总发电量:<span class="label label-success">' + row.DailyTotalPower + 'KWH;</span>&emsp;' +
                                '总发电量:<span class="label label-success">' + row.TotalPower + 'KWH;</span>&emsp;' +
                                '日用电量:<span class="label label-success">' + row.DailyUsePower + 'KWH;</span>&emsp;' +
                                '总用电量:<span class="label label-success">' + row.TotalUsePower + 'KWH;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '设备唯一通信ID高位:<span class="label label-success">' + row.MachineCommunicationH + ';</span>&emsp;' +
                                '设备唯一通信ID低位:<span class="label label-success">' + row.MachineCommunicationL + ';</span>&emsp;' +
                                '摄像头图像:<span class="label label-success">' + row.ImageUrl + ';</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '整体关机:<span class="label label-success">' + row.AllClose + ';</span>&emsp;' +
                                '泵1本地:<span class="label label-success">' + row.Pump1Local + ';</span>&emsp;' +
                                '泵2本地:<span class="label label-success">' + row.Pump2Local + ';</span>&emsp;' +
                                '泵1远程:<span class="label label-success">' + row.Pump1Remote + ';</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '泵2远程:<span class="label label-success">' + row.Pump2Remote + ';</span>&emsp;' +
                                '泵1故障:<span class="label label-success">' + row.Pump1Alarm + ';</span>&emsp;' +
                                '泵2故障:<span class="label label-success">' + row.Pump2Alarm + ';</span>&emsp;' +
                                '泵1运行:<span class="label label-success">' + row.Pump1Run + ';</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '泵2运行:<span class="label label-success">' + row.Pump2Run + ';</span>&emsp;' +
                                '支架电机上升:<span class="label label-success">' + row.MotorUp + ';</span>&emsp;' +
                                '支架电机下降:<span class="label label-success">' + row.MotorDown + ';</span>&emsp;' +
                                '液位:<span class="label label-success">' + row.WaterLevel + 'm;</span>&emsp;' +
                                "</div>" +
                                "<hr/>" +
                                "<div class='param-list'>" +
                                '甲烷浓度:<span class="label label-success">' + row.CH4 + ';</span>&emsp;' +
                                '温度:<span class="label label-success">' + row.Temperature + '℃;</span>&emsp;' +
                                '湿度:<span class="label label-success">' + row.Humidity + '%RH;</span>&emsp;' +
                                "</div>";
                            return result;
                        }
                    }];
                    yui.tableHeadPage("bootstraptableHistory", "/DeviceDataHistory/HistoryDetailsList?ClientId=" + _self.ClientId + "&&DeviceId=" + _self.DeviceId + "", objHistory, "POST", "ClientId");
                },
                
            },
        });


    </script>
}